import Vue from "vue";

import VueRouter from "vue-router";

// import Login from "@/pages/Login";
// import Home from "@/pages/Home";
// import Music from "@/pages/Home/components/Music";
// import Game from "@/pages/Home/components/Game";
// import News from "@/pages/Home/components/News";
// import NotFound from "@/pages/404";

/* 
把路由组件进行异步组件处理的方式.被称作为路由组件懒加载(路由懒加载)
*/
const Login = () => import("@/pages/Login");
const Home = () => import("@/pages/Home");
const Music = () => import("@/pages/Home/components/Music");
const Game = () => import("@/pages/Home/components/Game");
const News = () => import("@/pages/Home/components/News");
const NotFound = () => import("@/pages/404");
const MusicItem = () => import("@/pages/Home/components/Music/item");
//把VueRouter作为插件使用
Vue.use(VueRouter);

//重写VueRouter原型对象上的push方法
const oldPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (
  location,
  onComplete = () => {},
  onAbort = () => {}
) {
  //调用原来的push
  oldPush.call(this, location, onComplete, onAbort);
};

//实例化VueRouter 得到 router对象
const router = new VueRouter({
  mode: "history",
  //配置路由表
  routes: [
    /* !!!!默认路由 */
    {
      path: "/",
      //重定向
      redirect: "/home",
    },
    {
      path: "/login",
      component: Login,
      /* 
        命名路由
          有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。
          可以在创建 Router 实例的时候，在 routes 配置中给某个路由通过name属性设置名称。
      
      */
      name: "login",
    },
    {
      path: "/home",
      name: "home",
      component: Home,
      /* !!!!默认子路由(推荐方式) */
      redirect: "/home/music",
      children: [
        //!!!!默认子路由配置(一般不用)
        /* {
          path: "/home",
          redirect: "/home/music",
        }, */
        {
          path: "/home/music",
          component: Music,
          name: "music",
          children: [
            {
              path: "/home/music/item/:id/:name?",
              component: MusicItem,
              name: "MusicItem",
            },
          ],
        },
        {
          path: "/home/news",
          component: News,
          name: "news",
        },
        {
          path: "/home/Game",
          component: Game,
          name: "game",
        },
      ],
    },
    {
      path: "/*",
      component: NotFound,
    },
  ],
});

export default router;
